<!-- 单表配置项（通用） -->
<template>
  <el-form :inline="true" :model="form" label-position="top">
    <el-form-item label="主标题">
      <el-input v-model="form!.title!.text" />
    </el-form-item>
    <el-form-item label="副标题">
      <el-input v-model="form!.title!.subtext" />
    </el-form-item>
    <el-form-item label="标题位置">
      <el-select v-model="form!.title!.left">
        <el-option v-for="item in titlePositionArray" :key="item" :label="item" :value="item" />
      </el-select>
    </el-form-item>
    <el-form-item label="数据提示">
      <el-select v-model="form!.tooltip!.axisPointer!.type">
        <el-option v-for="item in axisSelectArray" :key="item" :label="item" :value="item" />
      </el-select>
    </el-form-item>

    <el-divider />

    <el-form-item label="显示图例标记">
      <el-switch v-model="form!.legend!.show" />
    </el-form-item>
    <el-form-item label="图例标记方向" v-if="form.legend?.show">
      <el-select v-model="form.legend!.orient">
        <el-option v-for="item in LegendOrientArray" :key="item" :label="item" :value="item" />
      </el-select>
    </el-form-item>
    <el-form-item label="图例标记位置" v-if="form.legend?.show">
      <el-select v-model="form.legend!.left">
        <el-option v-for="item in LegendLeftArray" :key="item" :label="item" :value="item" />
      </el-select>
    </el-form-item>
  </el-form>
</template>

<script lang="ts" setup>
import { chartStore } from '../../store/index'

import { Tooltip_AxisPointer_Type, Title_Left, Legend_Orient, Legend_Left } from '../../types/EChartsCommonConfig'
import { EChartsConfigForm } from '../../types/EChartsConfigForm'

const store: any = chartStore()
let form: EChartsConfigForm = store.form

// 下拉项 [数据提示]
let axisSelectArray = Object.values(Tooltip_AxisPointer_Type)
// 下拉项 [标题位置]
let titlePositionArray = Object.values(Title_Left)
// 下拉项 [图例标记方向]
let LegendOrientArray = Object.values(Legend_Orient)
// 下拉项 [图例标记位置]
let LegendLeftArray = Object.values(Legend_Left)
</script>

<style lang="less" scoped>
.series-item {
  background-color: #f6f6f6;
  border-radius: 5px;
  box-sizing: border-box;
  padding: 15px 20px 0 20px;
  margin: 10px 0;
}
</style>
